<template>
  <uniPopups ref="popup" :safe-area="false">
    <view
      class="gg-pop"
      :class="ggclass"
      :style="{
        background: backs,
        backgroundSize,
        width,
        minHeight,
        borderRadius: radius,
        paddingBottom,
      }"
    >
      <view class="title-box">
        <slot name="title">
          <c-text>
            {{ title }}
          </c-text>
          <text
            class="iconfont close icon-guanbi"
            style="color: #999999; font-size: 30rpx"
            @click="close"
          ></text>
        </slot>
      </view>
      <scroll-view
        scroll-y
        :style="{ maxHeight: maxHeight }"
        @scrolltolower="scrolltolower"
      >
        <view class="" :style="{ padding }">
          <slot></slot>
        </view>
      </scroll-view>
    </view>
  </uniPopups>
</template>

<script lang="ts" setup>
import {
  ref,
  provide,
  inject,
  defineProps,
  reactive,
  computed,
  getCurrentInstance,
  defineExpose
} from "vue";
import uniPopups from './uni-popup/components/uni-popup/uni-popup.vue'
const popup = ref();
const emit = defineEmits(["scrolltolower"]);
const { proxy } = getCurrentInstance() as any;
const parent = inject("parent") as any;
const props = defineProps({
  title: {
    type: String,
    default: "自定义",
  },
  background: {
    type: String,
    // default: "#E7ECEA",
    default: "",
  },
  background1: {
    type: String,
    default: "",
  },
  backgroundSize: {
    type: String,
    default: "100% 100%",
  },
  isOpenPattern: {
    type: Boolean,
    default: false,
  },
  ggclass: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  minHeight: {
    type: String,
    default: "600rpx",
  },
  maxHeight: {
    type: String,
    default: "600rpx",
  },
  radius: {
    type: String,
    default: "",
  },
  padding: {
    type: String,
    default: "",
  },
});
const paddingBottom = computed(() => {
  let safeAreaInsets = uni.getSystemInfoSync().safeAreaInsets as any;
  return `${safeAreaInsets.bottom + 20}rpx`;
});
const backs = computed(() => {
  if (
    props.background.includes("data:image") ||
    props.background.includes("http")||
    props.background.includes("static")
  ) {
    if (props.isOpenPattern || parent.isOpenPattern) {
      let index = proxy.$color.themeKey === "dark" ? 0 : 1;
      return `url(${index? props.background : props.background1})`;
    }
    return `url(${ props.background })`
  } else {
    return props.background || proxy.$color.theme.pageBgColor;
  }
});

const open = (mode = "bottom") => {
  popup.value.open(mode);
};
const close = () => {
  popup.value.close();
};
defineExpose({
	open,
	close
})
const scrolltolower = (e: any) => {
  emit("scrolltolower", e);
};
provide("pop", reactive({ ...props, open, close, popup }));
</script>
<style lang="scss" scoped>
.gg-pop {
  z-index: 10;
}

.title-box {
  padding: 30rpx;
  display: flex;
  position: relative;
  justify-content: center;
  border-bottom: 2rpx solid #f8faff;

  .close {
    position: absolute;
    right: 40rpx;
  }
}
</style>